<template>
  <div class="redPacket">
    <header>
      <van-icon name="arrow-left" @click="$router.push({ name: 'Home' })" />
      <p>天天领红包</p>
      <van-icon name="share-o" />
    </header>
    <main>
      <div class="rule" @click="$router.push({ name: 'redRule' })">规则</div>
      <div class="red_box">
        <div class="top">百亿补贴天天领</div>
        <div class="main">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="footer">
          <ul>
            <li
              v-for="item in data"
              :key="item.id"
              :class="day > item.id ? 'active' : '' || day == 0 ? 'active' : ''"
            >
              <div>
                <!-- 当day==0时候 passed true   stop false -->
                <van-icon name="stop" v-show="day <= item.id && day != 0" />
                <van-icon name="passed" v-show="day > item.id || day == 0" />
                <span v-show="item.id < 6">——</span>
              </div>
              <strong>{{ item.week }}</strong>
            </li>
          </ul>
        </div>
      </div>
      <div class="contents">
        <div class="content">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
            alt=""
            width="100%"
            height="150"
          />
          <strong>【面部填充】自体脂肪填充单部位</strong>
          <p>NO.4销量榜</p>
          <p>￥630</p>
          <p>史国军河南安琪儿整形</p>
        </div>
        <div class="content">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
            alt=""
            width="100%"
            height="150"
          />
          <strong>【面部填充】自体脂肪填充单部位</strong>
          <p>NO.4销量榜</p>
          <p>￥630</p>
          <p>史国军河南安琪儿整形</p>
        </div>
        <div class="content">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
            alt=""
            width="100%"
            height="150"
          />
          <strong>【面部填充】自体脂肪填充单部位</strong>
          <p>NO.4销量榜</p>
          <p>￥630</p>
          <p>史国军河南安琪儿整形</p>
        </div>
        <div class="content">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
            alt=""
            width="100%"
            height="150"
          />
          <strong>【面部填充】自体脂肪填充单部位</strong>
          <p>NO.4销量榜</p>
          <p>￥630</p>
          <p>史国军河南安琪儿整形</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      day: new Date().getDay(),
      data: [
        { id: 0, week: "周一", isTrue: false },
        { id: 1, week: "周二", isTrue: false },
        { id: 2, week: "周三", isTrue: false },
        { id: 3, week: "周四", isTrue: false },
        { id: 4, week: "周五", isTrue: false },
        { id: 5, week: "周六", isTrue: false },
        { id: 6, week: "周日", isTrue: false },
      ],
    };
  },
  created() {},
};
</script>

<style scoped lang="scss">
.redPacket {
  height: 100%;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    border-bottom: 2px solid #ccc;
  }
  main {
    overflow: hidden;
    flex: 1;
    overflow-y: auto;
    .rule {
      float: right;
      font-size: 25px;
    }
    .red_box {
      width: 660px;
      height: 500px;
      background-color: #ddd;
      margin: 60px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        width: 300px;
        height: 80px;
        margin: 0 auto;
        border-radius: 0 0 30px 30px;
        background-color: #fff;
        text-align: center;
        line-height: 80px;
        font-weight: 600;
      }
      .main {
        display: flex;
        justify-content: space-around;
        // margin-top: 30px;
        div {
          width: 150px;
          height: 200px;
          border-radius: 20px;
          background-color: #fff;
        }
      }
      .footer {
        ul {
          display: flex;
          justify-content: space-around;
          .active {
            color: red;
          }
          li {
            div {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
    }
    .contents {
      .content {
        width: 360px;
        height: 550px;
        // background-color: red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        float: left;
        margin-right: 30px;
        margin-top: 30px;
        p:nth-child(4) {
          color: red;
        }
      }
      .content:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  // a {
  //   display: block;
  // }
}
</style>